<template>  
  <view class="container">  
    <view class="navbar">  
      <image class="avatar" src="/static/avatar.png" mode="aspectFill"></image>  
      <text class="username">用户名</text>  
      <text class="logout" @click="logout">退出登录</text>  
    </view>  
    <view class="content">  
      <view class="section">  
        <text class="section-title">订单管理</text>  
        <!-- 这里可以添加订单列表组件 -->  
      </view>  
      <view class="section">  
        <text class="section-title">地址管理</text>  
        <!-- 这里可以添加地址列表组件 -->  
      </view>  
      <view class="section">  
        <text class="section-title">优惠券/红包</text>  
        <!-- 这里可以添加优惠券列表组件 -->  
      </view>  
      <!-- 其他功能区域... -->  
    </view>  
  </view>  
</template> 

<script>  
export default {  
  methods: {  
    logout() {  
      // 退出登录的逻辑，比如清除token等  
      uni.showModal({  
        title: '提示',  
        content: '确定要退出登录吗？',  
        success: (res) => {  
          if (res.confirm) {  
            // 执行退出登录操作  
          }  
        }  
      });  
    }  
  }  
}  
</script>

<style scoped>  
	.container {  
	  display: flex;  
	  flex-direction: column;  
	  padding: 20rpx;  
	  background-color: #fff;  
	}  
	  
	/* 导航栏样式 */  
	.navbar {  
	  display: flex;  
	  align-items: center;  
	  justify-content: space-between;  
	  margin-bottom: 20rpx;  
	  padding: 10rpx 0;  
	  border-bottom: 1px solid #f0f0f0;  
	}  
	  
	/* 头像样式 */  
	.avatar {  
	  width: 60rpx;  
	  height: 60rpx;  
	  border-radius: 50%;  
	  overflow: hidden;  
	}  
	  
	/* 用户名样式 */  
	.username {  
	  font-size: 16px;  
	  color: #333;  
	  margin-left: 10rpx;  
	}  
	  
	/* 退出登录文本样式 */  
	.logout {  
	  font-size: 14px;  
	  color: #999;  
	  text-decoration: none;  
	}  
	  
	/* 内容区域样式 */  
	.content {  
	  flex: 1;  
	  overflow-y: auto; /* 允许内容区域垂直滚动 */  
	}  
	  
	/* 功能区块标题样式 */  
	.section-title {  
	  font-size: 16px;  
	  color: #333;  
	  margin-bottom: 10rpx;  
	}  
	  
	/* 功能区块列表项样式（假设有列表） */  
	.section .list-item {  
	  display: flex;  
	  align-items: center;  
	  padding: 10rpx;  
	  border-bottom: 1px solid #f0f0f0;  
	}  
	  
	/* 功能区块列表项文本样式 */  
	.section .list-item text {  
	  flex: 1;  
	  font-size: 14px;  
	  color: #666;  
	}  
	  
	/* 功能区块列表项操作按钮样式（如编辑、删除） */  
	.section .list-item button {  
	  margin-left: 10rpx;  
	  padding: 5rpx 10rpx;  
	  font-size: 12px;  
	  background-color: #eee;  
	  border-radius: 4rpx;  
	  color: #666;  
	}  
  
</style>